<template>
    <div class="components-container">
        <div class="editor-container">
            <markdown-editor ref="markdownEditor" v-model="content1" height="300px"/>
        </div>
        <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">
            Get HTML
        </el-button>
    </div>
</template>

<script>
    import MarkdownEditor from './MarkdownEditor'

    const content = `
**This is test**

* vue
* element
* webpack

`
    export default {
        name: 'MarkdownDemo',
        components: {MarkdownEditor},
        data() {
            return {
                content1: content,
                content2: content,
                content3: content,
                content4: content,
                html: '',
                languageTypeList: {
                    'en': 'en_US',
                    'zh': 'zh_CN',
                    'es': 'es_ES'
                },
            }
        },
        computed: {
            language() {
                return this.languageTypeList['en']
            }
        },
        methods: {
            getHtml() {
                this.html = this.$refs.markdownEditor.getHtml();
                this.$alert(this.html)
                console.log(this.html)
            }
        }
    }
</script>

<style scoped>
    .editor-container {
        margin-bottom: 30px;
    }

    .tag-title {
        margin-bottom: 5px;
    }
</style>
